import React from 'react';
import './check.scss';
import {observable, observer} from 'mobx.collection';
import ImageLoadable from "components/plugins/imageLoading/imageLoading";
import {DateFormat, formatClassList} from "auxiliaries/extends/format";
import InfoEllipsisLine from "components/page/info-ellipsis-line";
import * as TYPES from 'auxiliaries/extends/enum';

@observer
class PersonnelInfoItem extends React.Component {
    @observable ClassList = [];

    async componentDidMount() {
        this.ClassList = await TYPES.GetEnumList(TYPES.EducationTitle);
    }

    render() {
        let {
            item = {},
            onClick,
            className
        } = this.props;
        let {
            OrgName,
            Cover,
            Title,
            Detail,
            StartTime,
            EndTime,
            Class,
        } = item;

        let TitleName = TYPES.GetEnumDescSync(this.ClassList, Title);

        return (
            <>
                <div className={["--personnel-info-item"].concat(formatClassList(className)).join(' ')}
                     onClick={onClick}>
                    {Cover ? <ImageLoadable className={"item"} src={Cover}/> : null}
                    <div className="--info">
                        <div className="name font-size-32">{OrgName}</div>
                        <div className="work font-size-22">
                            <span
                                className={"-type"}>{Class || ''}{(Class ? <>&nbsp;&nbsp;</> : '')}{TitleName || Title}</span>
                            <span>{DateFormat(StartTime, "yyyy.mm")}</span>
                            -
                            <span>{DateFormat(EndTime, "yyyy.mm")}</span>
                        </div>
                        <div className="summary">
                            <InfoEllipsisLine className={"summary-ellipsis font-size-26"} text={Detail} maxLine={2}/>
                        </div>
                    </div>
                </div>
                {this.props.children}
            </>
        );
    }
}

export default PersonnelInfoItem;